<!--  -->
<template>
  <el-tree
    :data="data"
    :props="defaultProps"
    node-key="id"
    default-expand-all
    :expand-on-click-node="false"
  >
    <template #default="{ node, data }">
      <span class="custom-tree-node">
        <span v-if="data.type === 'read'" :style="{ color: 'red' }">{{ node.label }}</span>
        <span v-else-if="data.type === 'write'" :style="{ color: 'green' }">{{ node.label }}</span>
        <span v-else-if="data.type === 'both'" :style="{ color: 'blue' }">{{ node.label }}</span>
        <span v-else>{{ node.label }}</span>
        <span>
          <a @click="append(data)"> 编辑 </a>
          <a style="margin-left: 8px" @click="remove(node, data)"> 删除 </a>
        </span>
      </span>
    </template>
  </el-tree>
</template>
  <script setup>
import { ref, reactive, onMounted } from 'vue'
import { useStore } from 'vuex'
const defaultProps = ref({
  children: 'children',
  label: 'DevicetypeName'
})
const data = ref(null)
const initlist = onMounted(() => {
  const store = useStore()
  const res = JSON.parse(JSON.stringify(store.state.deviceTypeStr))
  data.value = [res]
  processNode(data.value)
})

const processNode = (node) => {
  // if (node.property) {
  //   node.property = node.property.filter((property) => property.value !== '485地址')
  //   node.children = node.property.map((property) => ({
  //     DevicetypeName: `${property.value}:${property.key}`,
  //     type: property.type
  //     // 可以根据需要设置其他属性
  //   }))
  //   delete node.property
  // }
  // if (node.SensorPins) {
  //   node.children = node.SensorPins.map((pin) => ({
  //     DevicetypeName: `${pin.InputPin || pin.OutputPin}: ${pin.name || pin.ModelPin}`,
  //     type: pin.type
  //     // 可以根据需要设置其他属性
  //   }))
  //   delete node.SensorPins
  // }
  // if (node.children) {
  //   node.children.forEach(processNode)
  // }
}

const handleNodeClick = () => {}

const append = (data) => {}

const remove = (node, data) => {}
</script>

  <style lang="less" scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
